$(function () {

    let chname = false;    //用户名标杆
    let chphone = false;   //电话号码标杆
    let chmm = false;      //密码标杆
    let chmm1 = false;     //再次验证密码标杆
    let chyzm = false;     //随机验证码标杆
    let chphoneyzm = false;  //手机验证码


    // 生成随机验证码
    $('#yzm').click(function () {
        let yzm = null;          //随机验证码
        for (let i = 0; i < 2; i++) {
            let a = Math.floor(Math.random() * 10);
            let letter = Math.floor(Math.random() * 26);
            let b = String.fromCharCode(65 + letter);
            yzm = yzm + a + b;
        };
        // 获取随机颜色
        function randomColor() {
            let colorArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f']
            let color = "#";
            for (var i = 0; i < 6; i++) {
                color += colorArray[Math.floor(Math.random() * 16)];
            }
            return color;
        };
        // 直接拼接四个 i标签
        let fouri = '<i>' + yzm[0] + '</i>' + '<i>' + yzm[1] + '</i>' + '<i>' + yzm[2] + '</i>' + '<i>' + yzm[3] + '</i>';
        // 清除按钮的文字内容
        $('#yzm').text('');
        $('#yzm').html(fouri)
        // 把这四个i添加到按钮中
        // $(fouri).appendTo('#yzm');
        for (let i = 0; i < 4; i++) {
            $('#yzm i').eq(i).css('color', randomColor());
            $('#yzm i').eq(i).css('transform', "rotate(" + Math.ceil(Math.random() * 60) + "deg)");
        }

    }) //随机码结束

    //生成短信验证码
    $('#phoneyzm').click(function () {
        $(this).attr('disabled', true);
        let i = 6; //5s获取验证码
        let phoneyzm = parseInt(Math.random() * 90000) + 10000;
        let timer = setInterval(function () {
            i--;
            $('#phoneyzm').text(i + '请查收');
            console.log(1);
            if (i == 0) {
                $('#phoneyzm').text(phoneyzm).attr({ disabled: false });
                clearInterval(timer);
            }
        }, 1000)
    });  //验证码结束

    // 开始表单验证

    // 定义一个对象来储存每一个input的判断值
    let rule_obj={
        'user_name':false,
        'pwd':false,
        'tel':false
    }
    // 定义对象 来储存 正则表达式
    let rule={
        'user_name':/^[a-zA-Z0-9_-]{4,11}$/,
        'pwd':/^[a-zA-Z0-9_-]{4,11}$/,
        'tel':/^13[0-9]{9}$|14[0-9]{9}|15[0-9]{9}$|18[0-9]{9}$|17[0-9]{9}$/,
    }
    //验证账户名 密码  手机号
    $('input:lt(4)').blur(function () {
        console.log($(this).index('input'));
        // 获取到每个框的name
        let in_name=$(this).prop('name')
        let booln=rule[in_name].test($(this).val())
        
        if(booln){
            $(this).siblings('.s2').text('输入正确').css('color', 'green');
            $(this).css("border-color", "green");
            rule_obj[$(this).prop('name')]=true;
        }else{
            $(this).siblings('.s2').text('输入错误').css('color', 'red');
            $(this).css("border-color", "red");
            rule_obj[$(this).prop('name')]=false; 
        }
    })//账户名验证结束


    // 表单提交验证
    $('#form_sign').submit(function(){
        for(let key in rule_obj){
            if(!rule_obj[key]){
                popUp('请填写正确的登入信息')
                return false
            }
        }
        // return false
    })

    // 两次密码是否相同验证
    $('input').eq(4).keyup(function () {
        if ($(this).val().length > 4) {
            $(this).val($(this).val().substr(0, 4));
        }
        if ($(this).val() == $('#yzm').text()) {
            $(this).siblings('.s2').text('输入正确').css('color', 'green');
            $(this).css("border-color", "green");
            $('#yzm').attr({ disabled: true });
            chyzm = true;
            return;
        } else {
            $(this).siblings('.s2').text('输入错误').css('color', 'red');
            $(this).css("border-color", "red");
            chyzm = false;
            return;
        }
    });//随机验证码结束

    // 插件部分可以删除  小眼睛
    $('form div').eq(1).find('i').click(function () {
        $(this).toggleClass('bgi');
        // // 方法1
        // if ($(this).siblings('input').attr('type') == 'password') {
        //     $(this).siblings('input').attr({ type: 'text' });
        // } else {
        //     $(this).siblings('input').attr({ type: 'password' });
        // }
        // 方法2
        ($(this).siblings('input').attr('type') == 'password') ? $(this).siblings('input').attr({ type: 'text' }) : $(this).siblings('input').attr({ type: 'password' })
    });


    //封装一个用于弹窗显示的函数

    function popUp(text) {
        $('#popUp').css('display', 'block').text(text);
        setTimeout(function () {
            $('#popUp').css('display', 'none')
        }, 2000)
    }


    // // 判断是否勾选协议
    // $('#btn').click(function () {
    //     // 取到复选框    他的属性 是不是checked  在取反
    //     if (!$(':checkbox').prop('checked')) {
    //         // alert('请勾选协议')
    //         popUp('请勾选协议');
    //         return
    //     }; 0
    //     if (chname == false) {
    //         // alert('账户不正确');
    //         popUp('账户不正确')
    //         return
    //     };
    //     if (chmm == false) {
    //         // alert('密码不符合要求');
    //         popUp('密码不符合要求')
    //         return
    //     };
    //     if (chmm1 == false) {
    //         // alert('两次密码不一样');
    //         popUp('两次密码不一样')
    //         return
    //     };
    //     if (chphone == false) {
    //         // alert('手机号不正确');
    //         popUp('手机号不正确')
    //         return
    //     };
    //     if (chyzm == false) {
    //         // alert('随机验证码输入错误');
    //         popUp('随机验证码输入错误')
    //         return
    //     };
    //     if (chphoneyzm == false) {
    //         // alert('手机验证码输入错误');
    //         popUp('手机号码输入错误')
    //         return
    //     };
    //     alert("提交完成")
    //     $('form').submit();

    //     // 表单验证完

    // });
})